<template>
  <div id="phonemode">
    <div class="inner-mode">
      <div class="topimg" :style="{'backgroundImage':`url(${url})`}">
      </div>
      <div class="sharebtn">分享给好友</div>
      <div class="content-text" ref='contentText'>
     <!--   <div v-if="detailList.length>0">
          <p v-for="(item,index) in detailList" :class="item.title==1?'overstriking contentTextItem':'contentTextItem'"
            :isTitle='item.title==1?true:false' :key='index'>{{item.text}}</p>
        </div> -->
        <div>
          <div class="content-item">
            <h3 class="contentTextItem" isTitle='true'>邀请奖励</h3>
            <ul>
              <li class="contentTextItem" v-if="rule1.length>0"><p>1、{{rule1}}</p></li>
              <li class="contentTextItem" v-if="rule2.length>0"><p>2、{{rule2}}</p></li>
              <li class="contentTextItem" v-if="typeArrValue.length>0"><p>3、{{typeArrValue}}</p></li>
            </ul>
          </div>
          <div class="content-item">
            <h3 class="contentTextItem" isTitle='true'>邀请规则</h3>
            <ul>
              <li class="contentTextItem" v-if="rule3.length>0"><p>1、{{rule3}}</p></li>
              <li class="contentTextItem" v-if="rule4.length>0"><p>2、{{rule4}}</p></li>
              <li class="contentTextItem" v-if="rule5.length>0"><p>3、{{rule5}}</p></li>
            </ul>
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        // 奖励金额
        awardmoneys: 30,
        url: 'https://oss.juchehulian.com/admin_driving/20210127/PtSyqC1611730172.png',
        right: 106,
        contentText: ''
      }
    },
    props: {
      //奖励的金额
      awardmoney: {
        type: Number,
        default: 30
      },
      // 切换图片
      changeimg: '',
      rule1: {
        type: String,
        default: ''
      },
      rule2: {
        type: String,
        default: ''
      },
      rule3: {
        type: String,
        default: ''
      },
      rule4: {
        type: String,
        default: ''
      },
      rule5: {
        type: String,
        default: ''
      },

      typeArrValue: {
        type: String,
        default: ''
      },


      detailList: {
        type: Array,
        default: []
      }
    },
    watch: {
      changeimg(val) {
        if (val == 'zg') {
          this.url = 'https://oss.juchehulian.com/admin_driving/20210127/BVNxwy1611729928.png'
          this.right = 96
        } else {
          this.url = 'https://oss.juchehulian.com/admin_driving/20210127/PtSyqC1611730172.png'
          this.right = 106
        }
      },
    },
    methods: {
      //获取文字
      parentHandleclick() {
        let contentText = []
        let contentTextItem = document.querySelectorAll('.contentTextItem')
        contentTextItem.forEach((item) => {
          contentText.push({
            title: item.getAttribute('isTitle') == 'true' ? 1 : 0,
            text: item.innerText
          })
        })
        return contentText
      }
    }
  }
</script>
<!-- https://oss.juchehulian.com/admin_driving/20210127/BVNxwy1611729928.png -->
<style lang='scss' scoped>
  #phonemode {
    flex-shrink: 0;
    margin-top: 20px;
    margin-bottom: 20px;
    width: 340px;
    height: 700px;
    background: url('https://oss.juchehulian.com/admin_driving/20210127/Neoz9D1611713823.png') no-repeat;
    background-size: 100%;
    border-radius: 30px;
    overflow: hidden;

    .inner-mode {
      width: 308px;
      height: 543px;
      overflow-x: hidden;
      overflow-y: scroll;
      margin: 0 auto;
      margin-top: 76px;

      &::-webkit-scrollbar {
        width: 0 !important;
      }

      .topimg {
        transition: all .3s;
        width: 100%;
        height: 300px;
        margin: 0 auto;
        position: relative;
        background: url('https://oss.juchehulian.com/admin_driving/20210127/RgRYoG1611719035.png') no-repeat;
        background-size: 100%;

        .money {
          width: 35px;
          height: 30px;
          text-align: center;
          line-height: 30px;
          position: absolute;
          right: 106px;
          bottom: 50px;
          font-weight: bold;
          color: #e9de13;
          font-size: 20px;
        }
      }

      .sharebtn {
        cursor: pointer;
        width: 150px;
        height: 38px;
        text-align: center;
        line-height: 38px;
        color: #fff;
        font-size: 15px;
        border-radius: 5px;
        background-color: #ff7c24;
        margin: 0 auto;
        margin-top: 30px;
        border: 1px solid #ff8d3c;
      }

      .content-text {
        padding: 20px 0;

        .overstriking {
          font-weight: bold;
          font-size: 16px;
          color: #444444;
        }

        ul {
          li {
            text-align: justify;
            font-size: 13px;
            color: #666;
            line-height: 20px;
          }
        }
      }
    }

  }
</style>
